<template>
  <div class="admission">
    <Navbar :title="'入院证确定'" />
    <div class="content">
      <div class="content-header">
        <span> {{ user.username }} </span>
        <span> {{user.cardID}} </span>
        <span style="display: flex" @click="changeShow">
          <img src="@/assets/tabs/qiehuan.png" alt="" />
          切换
        </span>
      </div>
      <div class="details">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
          "
        >
          <div style="display: flex; align-items: center">
            <img src="@/assets/tabs/hospital.png" alt="" />
            <h3 style="margin-left: 20px">入院证</h3>
          </div>
          <button style="border: none; padding: 5px">未登记</button>
        </div>
        <hr />
        <div>
          <p>
            <span>{{ user.username }}</span>
            <span>{{ user.sex===0 ? "男" : "女" }}</span>
            <span>{{ user.age }}</span>
          </p>
          <p>入院科室：<span>门诊内一科</span></p>
          <p>开证医生：<span>刘医师</span></p>
          <p>开证时间：<span>2022-09-09 12:00:00</span></p>
          <p>入院诊断：<span>感冒</span></p>
        </div>
      </div>
      <div class="prompt">
        <h4>门诊患者入院程序提示</h4>
        <p>
          (1)门诊医生在初步评估患者的基础上，对确需住院治疗的患者，根据医院提供的服务范围和设施能否满足其诊疗的需求，如能满足其需求，则决定患者入院并开具入院申请单及核酸检测单。
        </p>
        <p>
          (2)入院患者持入院申请单，普通患者先行核酸检测，如患者行动不便或病情较重者，则由相关部门通知勤务中心，协助/家属按流程办理入院手续。
        </p>
        <p>
          (3)病区护士收到入院申请单后，热情接待患者，检查患者及家属的核酸报告，确认无殊后，妥善安排患者床位。 
        </p>
        <p>(4)通知主管医生查看患者，并及时执行医嘱</p>
      </div>
    </div>
    <div class="footer">
      <van-button
        type="primary"
        style="
          padding: 10px;
          position: fixed;
          bottom: 10px;
          left: 10px;
          right: 10px;
          border-radius: 10px;
        "
        @click="next"
      >
        我已确认并进入下一步
      </van-button>
    </div>
    <van-popup
      v-model:show="showBottom"
      closeable
      round
      position="bottom"
      style="height: 50%; z-index: 9999"
    >
      <div class="popup">
        <h2>添加就诊人</h2>
        <div v-for="item in familyList" :key="item._id" class="popupView" @click="changeUser(item)">
          <span> {{ item.username }} </span>
          <span style="margin-left: 30px"> {{ item.cardID }} </span>
        </div>
        <div>
          <van-button
            type="primary"
            style="
              padding: 10px;
              position: fixed;
              bottom: 10px;
              left: 10px;
              right: 10px;
              border-radius: 10px;
              font-size: 16px;
            "
            @click="next"
          >
            添加就诊人
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import Navbar from "./component/Navbar.vue";

import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import axios from "axios";
const router = useRouter();
const showBottom = ref(false);

const user=ref({
  username: "小张",
  cardID: 2222222,
  _id:'1213131',
  sex:0,
  age:18,
  phone:12345678901,
  address:'',
  userid:{},
  relationid:{}
})

interface familyList {
  username: string;
  _id: string;
  cardID: number;
  sex: number;
  age: number;
  phone: number;
  address: string;
  userid:any;
  relationid:any
}
const familyList = ref<familyList[]>([]);

onMounted(() => {
  getFamilyList();
});

const getFamilyList = async () => {
  let {
    data: { data },
  } = await axios.post("http://localhost:3000/zhc/getFamily");
  familyList.value = data;
};

const next = () => {
  router.push("/admissRegister");
};
const changeShow = () => {
  showBottom.value = !showBottom.value;
};

const changeUser=(item:familyList)=>{
  user.value=item
}
</script>

<style scoped lang="scss">
.admission {
  width: 100vw;
  height: 100vh;
  background-color: rgb(242, 242, 236);
  overflow: hidden;
  .content {
    width: 100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
    margin-top: 60px;

    .content-header {
      width: 90%;
      height: 50px;
      border-radius: 10px;
      margin-left: 5%;
      display: flex;
      justify-content: space-between;
      padding: 0px 10px;
      align-items: center;
      background-color: white;
      box-sizing: border-box;
    }
    .details {
      width: 90%;
      border-radius: 10px;
      margin-left: 5%;
      background-color: white;
      margin-top: 15px;
      height: 180px;
      padding: 0px 10px;
      align-items: center;
      background-color: white;
      box-sizing: border-box;
      p {
        margin: 0px;
        padding: 0px;
        font-size: 14px;
        line-height: 25px;
        span {
          margin-right: 10px;
        }
      }
    }
    .prompt {
      width: 90%;
      border-radius: 10px;
      margin-left: 5%;
      h4 {
        margin: 0px;
        padding: 0px;
        font-size: 14px;
        line-height: 50px;
      }
    }
  }
  .footer {
    padding: 0 20px;
    background-color: white;
    height: 70px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .popup {
    width: 100%;
    h2 {
      line-height: 50px;
      font-size: 16px;
      text-align: center;
    }
    .popupView {
      width: 90%;
      margin-left: 5%;
      margin-top: 15px;
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 20px 20px;
      background-color: rgb(220, 244, 255);
      box-sizing: border-box;
      border-radius: 10px;
    }
  }
}
</style>